<template>
  <div class="app-container">
    <!-- 表格 -->
    <StuTable
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="columns"
    >
      <!--厂家名称-->
      <template v-slot:shopName="{ scope }">
        <div class="shopName">
          <span @click="handleShopName(scope.row)">
            {{ scope.row.shopName }}</span
          >
        </div>
      </template>

      <!--续约 -->
      <template v-slot:renew="{ scope }">
        <div class="renew">
          <span @click="handleRenew(scope.row)"> 续约</span>
        </div>
      </template>

      <!-- 状态修改 -->
      <template v-slot:shopState="{ scope }">
        <div
          class="switch-btn"
          @click.prevent.stop="clickSwitch(scope.row.shopState, scope.row.uuid)"
        >
          <el-switch
            :active-value="0"
            :inactive-value="1"
            v-model="scope.row.shopState"
            active-color="#67C23A"
            inactive-color="#F52929"
          >
          </el-switch>
        </div>
      </template>

      <!-- 提醒 -->
      <template v-slot:remind="{ scope }">
        <div class="remind">
          <div
            class="remind-circle"
            :class="judgmentStatus(scope.row.remind)"
            @click="handleRemind(scope.row.remind, scope.row.uuid)"
          ></div>
        </div>
      </template>
    </StuTable>

    <!-- 分页 -->
    <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination"
    />

    <!-- 编辑角色名 -->
    <Renewal
      v-if="dialogs.remind"
      :visible.sync="dialogs.remind"
      :info="dialogs.row"
      @updateData="getShopListAll"
    />
  </div>
</template>

<script>
import { getShopListAll, remind, stop } from "@/api";
import { setIsHome, setAdminSwitch } from "@/utils/auth";
import Renewal from "./components/Renewal";
export default {
  name: "ShopList",
  components: {
    Renewal
  },
  data() {
    return {
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        // 表格的表头数据及其参数名称
        { name: "厂家名称", value: "shopName", slotName: "shopName" },
        { name: "注册日期", value: "registerDate", width: "175" },
        { name: "到期日期", value: "expiresDate", width: "175" },
        { name: "签约年限", value: "spaceSize" },
        { name: "总上传产品数量", value: "goodsSize" },
        { name: "剩余上传产品数量", value: "useGoodsSize" },
        { name: "总流量", value: "trafficSize" },
        { name: "剩余流量", value: "userTrafficSize" },
        { name: "总空间", value: "spaceSize" },
        { name: "剩余空间", value: "useSpaceSize" },
        { name: "续约", value: "state", slotName: "renew" },
        { name: "状态", value: "shopState", slotName: "shopState" },
        { name: "提醒", value: "remind", slotName: "remind" }
      ],
      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },
      //弹窗--------------------------------------------
      dialogs: {
        // 续约
        remind: false,
        row: {}
      }
    };
  },

  created() {
    this.getShopListAll();
  },

  methods: {
    //获取商品信息--------------------------------------------
    async getShopListAll() {
      const params = {
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize
      };
      let res = await getShopListAll(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
      this.$set(this.pageConfig, "total", res.total);
    },

    // 点击厂家 重新获取厂家权限
    handleShopName(row) {
      this.$store.commit("user/SET_SHOP_UUID", row.uuid);
      setAdminSwitch(1);
      setIsHome(1);
      location.reload();
    },

    //续约--------------------------------------------
    handleRenew(row) {
      this.$set(this.dialogs, "remind", true);
      this.$set(this.dialogs, "row", row);
    },

    //switch按钮--------------------------------------------
    clickSwitch(number, uuid) {
      this.$confirm(
        `此操作将${number == 0 ? "禁用" : "开启"}厂家, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          const data = {
            uuid,
            shopState: number == 0 ? 1 : 0
          };
          stop(data).then(res => {
            if (res.state == 100) {
              this.getShopListAll();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //提醒--------------------------------------------
    handleRemind(number, uuid) {
      this.$confirm(
        `此操作将${number == 0 ? "开启" : "关闭"}提醒, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          const data = {
            uuid,
            remind: number == 0 ? 1 : 0
          };
          remind(data).then(res => {
            if (res.state == 100) {
              this.getShopListAll();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(e => {
          this.$message({
            type: "info",
            message: "已取消修改"
          });
        });
    },

    //判断状态--------------------------------------------
    judgmentStatus(boolean) {
      return boolean ? "success" : "warning";
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getShopListAll();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
.app-container {
  .renew,
  .shopName {
    color: $--color-primary;
    & > span {
      cursor: pointer;
    }
  }

  //提醒
  .remind {
    .remind-circle {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      margin: 0 auto;
      cursor: pointer;
    }

    .success {
      background-color: $--color-success;
    }

    .warning {
      background-color: $--color-warning;
    }
  }

  // 状态修改
  .switch-btn {
    width: 40px;
    cursor: pointer;
    margin: 0 auto;
    .el-switch {
      pointer-events: none;
    }
  }
}
</style>
